<template>
  <div>
    <!--工具栏-->
    <div class="crud-group">
      <!-- 搜索 -->
      <el-input
        v-model="tblDatabaseName"
        placeholder="请输入库名"
      />
      <el-input
        v-model="tblName"
        placeholder="请输入表名"
      />
      <el-select
        v-model="syncType"
        placeholder="请选择同步状态"
      >
        <el-option
          v-for="val in syncTypelist"
          :key="val"
          :label="val"
          :value="val"
        />
      </el-select>

      <div>
        <el-button
          class="filter-item"
          type="success"
          icon="el-icon-search"
          @click="search"
        >搜索</el-button>
        <el-button
          class="filter-item"
          type="warning"
          icon="el-icon-refresh-left"
          @click="reset"
        >重置</el-button>
      </div>
    </div>
    <el-button
      type="primary"
      :disabled="confirmFlag"
      @click="updateBatchClick('已确认')"
    >批量确认</el-button>
    <el-button
      type="primary"
      :disabled="filterFlag"
      @click="filterBatchClick()"
    >批量过滤</el-button>
    <!--表格渲染-->
    <el-table
      :data="clusterList"
      border
      style="margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
      />
      <el-table-column
        prop="tblDatabaseName"
        label="库名"
        show-overflow-tooltip
      />
      <el-table-column
        prop="tblName"
        label="表名"
        show-overflow-tooltip
      />
      <el-table-column
        prop="partName"
        label="分区值"
        show-overflow-tooltip
      />
      <el-table-column
        prop="location"
        label="HDFS存储路径"
        show-overflow-tooltip
      />
      <el-table-column
        prop="syncType"
        label="同步状态"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.syncType != '已确认'"
            size="mini"
            type="text"
            @click="confirmClick(scope.row)"
          >确认</el-button>
          <el-button
            v-if="scope.row.syncType != '已过滤'"
            size="mini"
            type="text"
            @click="filterClick(scope.row)"
          >过滤</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <!--分页组件-->
      <el-pagination
        :current-page="current"
        :page-size="size"
        layout="prev, pager, next,sizes,total"
        :total="length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      v-if="treeFlag"
      :close-on-click-modal="false"
      :before-close="treeCloses"
      :visible.sync="treeFlag"
      append-to-body
      title="规则确认"
      width="1000px"
    >
      <el-row>
        <el-col :span="6">
          <el-tree
            :data="treeData"
            :props="defaultProps"
            default-expand-all
          >
            <span
              slot-scope="{ node }"
              class="custom-tree-node"
            >
              <span>
                <el-tooltip
                  effect="dark"
                  :content="node.label"
                  placement="top"
                >
                  <span
                    class="label-name"
                    @click="handleNodeClick(node)"
                  >{{
                    node.label
                  }}</span>
                </el-tooltip>
              </span>
            </span>
            <!-- <template #default="{ node, treeData }">
              <span
                class="custom-tree-node"
                :title="node.label"
                v-text="node.label"
                @click="handleNodeClick(node)"
              >
                <span>{{ node.label }}</span>
              </span>
            </template> -->
          </el-tree>
        </el-col>
        <el-col :span="18">
          <div>
            <div
              v-if="ifpartName"
              style="margin-left: 20px; font-size: 16px; margin-bottom: 10px"
            >
              <span style="font-weight: 700">当前表名分区值为：</span>
              <span>{{ partName }}</span>
            </div>
          </div>
          <div style="margin-left: 20px; color: red; font-size: 10px">
            无同步规则，默认展示全部同步规则
          </div>
          <Rules @changeCate="changeCate" />
        </el-col>
      </el-row>
      <div style="margin-top: 60px; margin-left: 45%">
        <el-button
          type="primary"
          @click="submitupdata"
        >确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LineChart from '@/api/dashboard/hotStandby'
import Rules from './Rules.vue'

export default {
  name: 'DataDesensitizationRules',
  components: {
    Rules
  },
  data() {
    return {
      current: 1,
      size: 10,
      length: 0,
      clusterList: [],
      syncTypelist: ['已确认', '已过滤', '待确认'],
      tblName: '',
      tblDatabaseName: '',
      jqForm: {
        id: '',
        clusterName: '',
        clusterFlag: '',
        clusterVersion: '',
        hdfsPrefixPath: '',
        appPath: ''
      },
      versionList: ['CDH 6.3.2 (Parcel)'],
      multipleSelection: [],
      idList: [],
      syncType: '',
      syncRuleId: '',
      treeData: [],
      treeFlag: false,
      defaultProps: {
        children: 'value',
        label: 'key'
      },
      treeTable: [],
      filedForm: {},
      IdList: [],
      type: '',
      filterFlag: true,
      confirmFlag: true,
      flag: 0,
      cflag: 0,
      ifpartName: false,
      partName: '',
      tblNameId: '',
      submitData: [],
      id: ''
    }
  },
  created() {
    this.getclustersparingconf()
  },
  methods: {
    getclustersparingconf() {
      this.filterFlag = true
      this.confirmFlag = true
      var data = {
        current: this.current,
        size: this.size,
        tblName: this.tblName,
        tblDatabaseName: this.tblDatabaseName,
        syncType: this.syncType
      }
      LineChart.getdata(data)
        .then((data) => {
          console.log(data.records[0])
          this.length = data.total
          if (data.total === 0) {
            this.jqForm = {}
          } else {
            this.jqForm = data.records[0]
          }
          this.clusterList = data.records
        })
        .catch(() => { })
    },
    search() {
      this.getclustersparingconf()
    },
    reset() {
      this.tblName = ''
      this.tblDatabaseName = ''
      this.syncType = ''
      this.getclustersparingconf()
    },
    handleSelectionChange(val) {
      this.flag = 0
      this.cflag = 0
      if (val.length === 0) {
        this.filterFlag = true
        this.confirmFlag = true
      } else {
        this.multipleSelection = val
        for (let i = 0; i < val.length; i++) {
          if (val[i].syncType === '已确认') {
            this.cflag = 1
          } else if (val[i].syncType === '已过滤') {
            this.flag = 1
          }
        }
        if (this.cflag === 1 && this.flag !== 1) {
          this.confirmFlag = true
          this.filterFlag = false
        } else if (this.flag === 1 && this.cflag !== 1) {
          this.filterFlag = true
          this.confirmFlag = false
        } else if (this.flag !== 1 && this.cflag !== 1) {
          this.filterFlag = false
          this.confirmFlag = false
        } else if (this.flag === 1 && this.cflag === 1) {
          this.filterFlag = true
          this.confirmFlag = true
        }
      }
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.getclustersparingconf()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getclustersparingconf()
    },
    // 点击过滤
    filterClick(row) {
      this.submitData = []
      this.$confirm('此操作将过滤掉所选配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          var idlist = { id: row.id, syncRuleId: row.syncRuleId }
          this.submitData.push(idlist)
          console.log('submitData')
          console.log(this.submitData)
          const data = {
            scanMetadataDTO: this.submitData,
            syncType: '已过滤'
          }
          console.log(data)
          // 批量确认/批量过滤
          LineChart.updateBatch(data)
            .then((data) => {
              this.treeFlag = false
              this.idList = []
              this.getclustersparingconf()
              this.treeData = []
              this.submitData = []
              this.syncRuleId = ''
              this.tblNameId = ''
              this.getclustersparingconf()
              this.$message({
                type: 'success',
                message: '过滤成功!'
              })
            })
            .catch(() => { })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 批量过滤
    filterBatchClick() {
      this.submitData = []
      this.$confirm('此操作将过滤掉所选配置, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            var idlist = {
              id: this.multipleSelection[i].id,
              syncRuleId: this.multipleSelection[i].syncRuleId
            }
            this.submitData.push(idlist)
          }
          console.log('submitData')
          console.log(this.submitData)
          const data = {
            scanMetadataDTO: this.submitData,
            syncType: '已过滤'
          }
          console.log(data)
          LineChart.updateBatch(data)
            .then((data) => {
              this.treeFlag = false
              this.idList = []
              this.getclustersparingconf()
              this.treeData = []
              this.submitData = []
              this.syncRuleId = ''
              this.tblNameId = ''
              this.getclustersparingconf()
              this.$message({
                type: 'success',
                message: '过滤成功!'
              })
            })
            .catch(() => { })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    // 点击确认
    confirmClick(row) {
      this.idList = []
      this.type = '已确认'
      // console.log(row);
      this.treeData = [
        {
          key: '',
          value: [
            {
              key: '',
              id: ''
            }
          ]
        }
      ]
      this.treeData[0].key = row.tblDatabaseName
      this.treeData[0].value[0].key = row.tblName
      this.treeData[0].value[0].id = row.syncRuleId
      this.idList.push(row.id)
      this.treeFlag = true
      this.tblNameId = row.id

      if (row.partName) {
        this.ifpartName = true
        this.partName = row.partName
      } else {
        this.ifpartName = false
        this.partName = ''
      }

      var idlist = { id: row.id, syncRuleId: row.syncRuleId }
      this.submitData.push(idlist)
      console.log('submitData')
      console.log(this.submitData)
    },
    // 批量确认
    updateBatchClick(type) {
      this.idList = []
      this.type = type
      this.treeData = []
      if (this.multipleSelection.length === 1) {
        this.tblNameId = this.multipleSelection[0].id
      }
      // 使用构造函数创建Map
      const myMap = new Map()

      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.idList.push(this.multipleSelection[i].id)
        var tblDatabaseName = this.multipleSelection[i].tblDatabaseName
        var tblName = this.multipleSelection[i].tblName
        var syncRuleId = this.multipleSelection[i].syncRuleId
        var id = this.multipleSelection[i].id
        var partName = this.multipleSelection[i].partName
        var flag = 0
        // 如果不在res中，加进去
        if (myMap.get(tblDatabaseName) === undefined) {
          myMap.set(tblDatabaseName, [
            {
              key: tblName,
              syncRuleId: syncRuleId,
              id: id,
              partName: partName
            }
          ])
        } else {
          // 存在的情况
          var temp = myMap.get(tblDatabaseName)
          for (var j = 0; j < temp.length; j++) {
            if (tblName === temp[j].tblName) {
              // 如果遇到重复的，不加，结束循环
              if (!partName) {
                flag = 1
                break
              } else if (partName && partName === temp[j].partName) {
                flag = 1
                break
              }
            }
          }
          // 循环结束了，还有遇到不相等的
          if (flag === 0) {
            myMap.set(tblDatabaseName, [
              ...temp,
              {
                key: tblName,
                syncRuleId: syncRuleId,
                id: id,
                partName: partName
              }
            ])
          }
        }
      }

      for (const [key, value] of myMap) {
        var list = {
          key: '',
          value: null
        }
        console.log(key, value)
        list.key = key
        list.value = value
        this.treeData.push(list)
      }
      this.treeFlag = true

      if (this.multipleSelection[0].partName) {
        this.ifpartName = true
        this.partName = this.multipleSelection[0].partName
      } else {
        this.ifpartName = false
        this.partName = ''
      }
    },
    treeCloses() {
      this.treeFlag = false
      this.getclustersparingconf()
      this.treeData = []
      this.ifpartName = false
      this.partName = ''
      this.submitData = []
      this.syncRuleId = ''
      this.tblNameId = ''
    },
    handleNodeClick(node) {
      if (node.level === '2') {
        console.log(node.data.partName)
        if (node.data.partName) {
          this.ifpartName = true
          this.partName = node.data.partName
        } else {
          this.ifpartName = false
          this.partName = ''
        }
      }
    },
    submitupdata() {
      if (this.submitData.length > 0) {
        const data = {
          scanMetadataDTO: this.submitData,
          syncType: this.type
        }
        console.log(data)
        LineChart.updateBatch(data)
          .then((data) => {
            this.treeFlag = false
            this.idList = []
            this.getclustersparingconf()
            this.treeData = []
            this.submitData = []
            this.syncRuleId = ''
            this.tblNameId = ''
          })
          .catch(() => { })
      } else {
        this.$notify({
          title: '请选择同步规则！',
          type: 'warning',
          // 存在时间
          duration: 5000
        })
      }
    },
    // Rules组件传过来的数据
    changeCate(row) {
      console.log(row)
      console.log(row.id)
      console.log(this.treeData)
      this.submitData = []
      if (this.multipleSelection.length > 0) {
        for (let i = 0; i < this.multipleSelection.length; i++) {
          var idlist = {
            id: this.multipleSelection[i].id,
            syncRuleId: row.id
          }
          this.submitData.push(idlist)
        }
      } else {
        var idlist = {
          id: this.tblNameId,
          syncRuleId: row.id
        }
        this.submitData.push(idlist)
      }

      console.log('submitData')
      console.log(this.submitData)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.head-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0px 0;
}

.custom-tree-node {
  /* // 定宽 */
  width: 80%;
  display: block !important;

  .label-name {
    width: 100%;
    display: block !important;
    /* 溢出部分隐藏 */
    overflow: hidden !important;
    /* 禁止自动换行   */
    white-space: nowrap !important;
    /* 使溢出部分以省略号显示 */
    text-overflow: ellipsis !important;
  }
}
</style>
